<template>
  <div class="main">
    <view
      class="main-order-section"
      :key="index"
      v-for="(order, index) in computedOrders"
    >
      <view class="order-top">
        <view
          class="logisticsNo"
          v-if="order.logisticsNo"
          @click="copy(order.logisticsNo)"
        >
          <view class="ordersn"> {{ "物流单号:" + order.logisticsNo }} </view>
          <image class="icon" src="../../static/icons/order-icon.png"> </image>
        </view>
        <view
          class="finish"
          @click="swtichPage('/pages/order/order-details?id=' + order.id)"
        >
          <view class="text">{{ tips[order.orderStatus] }}</view>
          <image
            class="icon"
            src="../../static/icons/right.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
      <view class="main-order">
        <image class="order-cover" mode="aspectFill" :src="order.cover"></image>

        <view class="info">
          <text class="user-info">
            {{ order.address.name + " " + order.address.phoneNumber }}
          </text>
          <text class="address-info">
            {{ order.address.address }}
          </text>
          <div class="price-wrapper">
            实付款：<text class="price">{{ order.finalPrice + "￥" }}</text>
          </div>
        </view>
      </view>
      <view class="order-bottom">
        <text class="create-time">
          {{ order.createTime }}
        </text>
      </view>
    </view>
  </div>
</template>
<script lang="ts">
import {
  listOrder,
  ORDER_TYPE_LETTER,
  ORDER_TYPE_POSTCARD,
  ORDER_TYPE_PRODUCT,
} from "@/api/order";
import {
  myFile,
  Order,
  OrderProduct,
  PostcardOrder,
  PostPictureOrder,
  searchVO,
} from "@/typings";
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      orders: [] as Order[],
      searchVO: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      } as searchVO,
      finish: false,
      tips: {
        0: "待支付",
        1: "待寄出",
        2: "已寄出",
        3: "已完成",
      },
    };
  },
  onLoad(ops: any) {
    this.searchVO.status = ops.status;
    this.loadOrder();
  },
  computed: {
    computedOrders() {
      let list: Order[] = this.orders.map((res) => {
        //旧的数据已经转换过了，不需要重新parse
        if (res.priceDetail.orderId) {
          return res;
        }
        res.priceDetail = res.priceDetail ? JSON.parse(res.priceDetail) : "";
        if (res.type == ORDER_TYPE_LETTER) {
          let details = res.priceDetail as PostPictureOrder;
          res.cover = details.template?.picture;
        } else if (res.type == ORDER_TYPE_POSTCARD) {
          let details = res.priceDetail as PostcardOrder;
          let files = JSON.parse(details.cover) as myFile[];
          res.cover = files[0].path;
        } else if (res.type == ORDER_TYPE_PRODUCT) {
          let details = res.priceDetail as OrderProduct[];
          res.cover = details[0].product.cover;
        }
        return res;
      });
      return list;
    },
  },
  methods: {
    copy(value: any) {
      uni.setClipboardData({
        data: value,
        success: () => {},
      });
    },
    loadOrder() {
      if (!this.finish) {
        listOrder(this.searchVO).then((res) => {
          if (res.pageSize > res.size) {
            this.finish = true;
          }
          this.searchVO.pageNum++;
          this.orders.push(...res.list);
        });
      }
    },
    swtichPage(url: string) {
      uni.navigateTo({ url });
    },
  },
  onReachBottom() {
    this.loadOrder();
  },
});
</script>
<style lang="scss" scoped>
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;
  padding-bottom: 200rpx;
}
.main-order-section {
  padding: 20rpx;
  border-radius: 15rpx;
  box-shadow: 2rpx 2rpx 10rpx 10rpx rgba($color: #000000, $alpha: 0.02);
  margin-top: 20rpx;
  font-size: 28rpx;
  .order-top {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;

    .icon {
      width: 25rpx;
      height: 25rpx;
    }
    .logisticsNo {
      display: flex;
      align-items: center;
      .ordersn {
        font-size: 27rpx;
        color: #656565;
        margin-right: 30rpx;
      }
    }
    .finish {
      flex: 2;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .text {
        color: #c4c4c4;
        margin-right: 10rpx;
      }
    }
  }

  .main-order {
    display: flex;
    align-items: flex-start;
    .order-cover {
      flex-shrink: 0;
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
    }
    .info {
      width: 100%;
      flex: 2;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .user-info {
        font-size: 35rpx;
        font-weight: bold;
      }

      .address-info {
        margin-top: 20rpx;
        font-size: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba($color: #000000, $alpha: 0.5);
      }
      .price-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 28rpx;
        color: rgba($color: #000000, $alpha: 0.8);
        .price {
          font-size: 34rpx;
          font-weight: 500;
          color: #ff471f;
        }
      }
    }
  }
  .order-bottom {
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-end;
    .create-time {
      font-size: 28rpx;
      margin-right: 20rpx;
      color: rgba($color: #000000, $alpha: 0.5);
    }
  }
}
</style>
